<template>
    <div class="rs-features style2">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-6 sm-mb-30">
                    <div class="rs-iconbox-area"><a href="http://gaozhong.wfls.com.cn/"></a>
                        <div class="icon-area"><i class="wfls wflsfont wfls-mao"></i></div>
                        <div class="text-area">
                            <h3 class="icon-title">高中部</h3> <span class="subtext">Senior High School</span>
                        </div>
                    </div>
                </div>
                <!-- <div class="col-lg-6 col-md-6 col-6 md-mb-30">
                    <div class="rs-iconbox-area"><a href="http://chuzhong.wfls.com.cn/"></a>
                        <div class="icon-area"><i class="wfls wflsfont wfls-shu"></i></div>
                        <div class="text-area">
                            <h3 class="icon-title">初中部</h3> <span class="subtext">Junior High School</span>
                        </div>
                    </div>
                </div> -->
                <!-- <div class="col-lg-4 col-md-4 col-4 md-mb-30">
                    <div class="rs-iconbox-area"><a href="http://xiaoxue.wfls.com.cn/"></a>
                        <div class="icon-area"><i class="wfls wflsfont wfls-bi"></i></div>
                        <div class="text-area">
                            <h3 class="icon-title">小学部</h3> <span class="subtext">
                                Primary School
                            </span>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">

</script>
<style lang="scss">
.rs-features {
    margin-top: -110px;
}

.rs-features.style2 {
    margin-top: -110px;
}

.rs-features.style2 .rs-iconbox-area {
    position: relative;
    transition: all .3s ease;
    padding: 50px;
    background-color: #234b7e;
    border-radius: 5px 5px 5px 5px;
    text-align: center
}

.rs-features.style2 .rs-iconbox-area a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2
}

.rs-features.style2 .rs-iconbox-area .icon-area {
    margin-bottom: 32px !important
}

.rs-features.style2 .rs-iconbox-area .icon-area i {
    font-size: 80px;
    color: #fff
}

.rs-features.style2 .rs-iconbox-area .text-area {
    display: flex;
    align-items: center
}

.rs-features.style2 .rs-iconbox-area .text-area .icon-title {
    font-size: 32px;
    font-weight: normal;
    line-height: 1;
    color: #fff;
    margin-bottom: 0;
    display: block;
    position: relative;
    min-width: 50%
}

.rs-features.style2 .rs-iconbox-area .text-area .subtext {
    color: #fff;
    font-size: 14px;
    line-height: 14px;
    text-align: left
}

.rs-features.style2 .rs-iconbox-area:hover {
    transform: translateY(-10px)
}

.rs-features.style2 .rs-iconbox-area:hover .icon-area i {
    color: #eea522
}

.rs-features.style2 .rs-iconbox-area:hover .text-area .icon-title {
    color: #eea522
}

.rs-features.style2 .rs-iconbox-area:hover .text-area .subtext {
    color: #eea522
}

.rs-features.style2 .rs-iconbox-area {
    padding: 20px
}

.rs-features.style2 .rs-iconbox-area .icon-area {
    margin-bottom: 15px !important
}

.rs-features.style2 .rs-iconbox-area .icon-area i {
    font-size: 35px
}

@media only screen and (max-width: 991px) {
    .rs-features.style2 .rs-iconbox-area .text-area .subtext {
        display: none;
    }

    .rs-features.style2 .rs-iconbox-area .text-area .icon-title {
        min-width: 100%;
        font-size: 25px;
    }
}
</style>